<template>
  <PageWrapper contentClass="flex" contentFullHeight dense fixedHeight>
    <a-card>
      <div style="margin-bottom: 20px">
        <a-form :model="formState">
          <a-row :gutter="[20, 20]">
            <a-col :sm="6" :xs="24">
              <a-form-item :label="t('sys.code.status')">
                <a-cascader
                  v-model:value="formState.statesetlect"
                  :options="optionsstatusTypeList"
                  :placeholder="t('sys.form.placeholder.status')"
                />
                <!-- <a-select
                  :placeholder="t('sys.form.placeholder.status')"
                  allowClear
                  v-model:value="formState.state"
                >
                  <a-select-option
                    v-for="(item, index) in optionsstatusTypeList"
                    :key="index"
                    :value="item.value"
                    >{{ item.title }}
                  </a-select-option>
                </a-select> -->
              </a-form-item>
            </a-col>
            <a-col :sm="6" :xs="24">
              <a-form-item label="ID">
                <a-input
                  v-model:value="formState.taskId"
                  :placeholder="t('sys.configuration.pleaseenter') + 'ID'"
                  allowClear
                />
              </a-form-item>
            </a-col>
            <a-col :sm="6" :xs="24">
              <a-form-item :label="t('sys.analysis.columnsOffline.taskId')">
                <a-input
                  v-model:value="formState.superTaskId"
                  :placeholder="
                    t('sys.configuration.pleaseenter') + t('sys.analysis.columnsOffline.taskId')
                  "
                  allowClear
                />
              </a-form-item>
            </a-col>
            <a-col :sm="6" :xs="24">
              <a-form-item :label="'数据来源'">
                <a-select
                  v-model:value="formState.dataSource"
                  :placeholder="t('sys.form.placeholder.status')"
                >
                  <a-select-option
                    v-for="(item, index) in dataSourceTypeList"
                    :key="index"
                    :value="item.value"
                    >{{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="6" :xs="24">
              <a-form-item :label="t('sys.userlist.columns.dataSource')">
                <a-select
                  v-model:value="formState.dataSource"
                  :placeholder="t('sys.form.placeholder.status')"
                >
                  <a-select-option
                    v-for="(item, index) in dataSourceTypeList"
                    :key="index"
                    :value="item.value"
                    >{{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="6" :xs="24">
              <a-form-item :label="t('sys.userlist.columns.Binduser')">
                <a-select
                  v-model:value="formState.isBind"
                  :placeholder="t('sys.form.placeholder.status')"
                >
                  <a-select-option
                    v-for="(item, index) in BinduserTypeList"
                    :key="index"
                    :value="item.value"
                    >{{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!-- <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.userlist.columns.isRead')">
                <a-select
                  :placeholder="t('sys.form.placeholder.status')"
                  v-model:value="formState.dataSource"
                >
                  <a-select-option
                    v-for="(item, index) in ReadTypeList"
                    :key="index"
                    :value="item.value"
                    >{{ item.label }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :sm="6" :xs="24">
              <a-form-item :label="t('sys.userlist.columns.Markingstatus')">
                <a-select
                  v-model:value="formState.markingStatus"
                  :placeholder="t('sys.form.placeholder.status')"
                >
                  <a-select-option
                    v-for="(item, index) in MarkingTypeList"
                    :key="index"
                    :value="item.value"
                    >{{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="6" :xs="24">
              <a-form-item :label="t('sys.userlist.columns.name')">
                <a-input
                  v-model:value="formState.name"
                  :placeholder="t('sys.configuration.pleaseenter') + t('sys.userlist.columns.name')"
                  allowClear
                />
              </a-form-item>
            </a-col>
            <!-- <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.menu.columns.orderNo')">
                <a-radio-group v-model:value="formState.sorter" @change="radioChange">
                  <a-radio value="investSort"> {{ t('sys.userlist.Investment') }}</a-radio>
                  <a-radio value="marketingSort">{{ t('sys.userlist.Marketers') }}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col> -->
            <a-col :sm="6" :xs="24">
              <a-space>
                <a-button :icon="h(SearchOutlined)" type="primary" @click="Reactinquire">
                  {{ t('sys.form.placeholder.inquire') }}
                </a-button>
                <a-button
                  v-if="rolesListID?.roleId == 1"
                  type="primary"
                  @click="AssignaccountsClick"
                >
                  {{ t('sys.form.placeholder.Assignaccountsall') }}
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-collapse>
        <a-collapse-panel key="1" :header="t('sys.statistics.label')">
          <p
            >{{ t('sys.statistics.userCountActive') }} :
            {{ t('sys.statistics.userCountActiveExplain') }}</p
          >
          <p
            >{{ t('sys.statistics.userCountExtended') }} :
            {{ t('sys.statistics.userCountExtendedExplain') }}</p
          >
          <p
            >{{ t('sys.statistics.insufficientInfo') }} :
            {{ t('sys.statistics.insufficientInfoExplain') }}</p
          >
          <p
            >{{ t('sys.statistics.reportCount') }} : {{ t('sys.statistics.reportCountExplain') }}</p
          >
          <p
            >{{ t('sys.statistics.collectedDetails') }} :
            {{ t('sys.statistics.collectedDetailsExplain') }}</p
          >
          <p
            >{{ t('sys.statistics.ungeneratedReport') }} :
            {{ t('sys.statistics.ungeneratedReportExplain') }}</p
          >
        </a-collapse-panel>
      </a-collapse>
      <a-alert class="mb-2 mt-2" show-icon type="info">
        <template #message>
          <div>
            <span>
              <div>
                <div class="ml-2">
                  {{ t('sys.statistics1.Remaining') }} :
                  {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifo.detail.allCount }}
                  {{ t('sys.statistics1.taskprocess10') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.detail.allCount - StatisticsInifo.detail.remainCount }}
                  </span>
                  {{ t('sys.statistics1.label') }}:
                  <span class="text-red-500">
                    {{ StatisticsInifo.detail.remainCount }}
                  </span>
                  {{ t('sys.statistics1.insufficientInfoExplain') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.detail.passCount }}
                  </span>

                  {{ t('sys.statistics1.taskprocess9') }}:
                  <span class="text-red-500">
                    {{
                      StatisticsInifo.detail.allCount -
                      StatisticsInifo.detail.passCount -
                      StatisticsInifo.detail.remainCount
                    }}
                  </span>
                </div>
                <div class="ml-2">
                  {{ t('sys.statistics1.Report') }} : {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifo.process.allCount }}
                  {{ t('sys.statistics1.taskprocess10') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.process.allCount - StatisticsInifo.process.remainCount }}
                  </span>
                  {{ t('sys.statistics1.label') }}:
                  <span class="text-red-500">
                    {{ StatisticsInifo.process.remainCount }}
                  </span>
                  {{ t('sys.statistics1.insufficientInfoExplain') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.process.passCount }}
                  </span>

                  {{ t('sys.statistics1.taskprocess9') }}:
                  <span class="text-red-500">
                    {{
                      StatisticsInifo.process.allCount -
                      StatisticsInifo.process.passCount -
                      StatisticsInifo.process.remainCount
                    }}
                  </span>
                </div>
                <div class="ml-2">
                  {{ t('sys.statistics1.collectedDetails') }} :
                  {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifo.avator.allCount }}
                  {{ t('sys.statistics1.taskprocess10') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.avator.allCount - StatisticsInifo.avator.remainCount }}
                  </span>
                  {{ t('sys.statistics1.label') }}:
                  <span class="text-red-500">
                    {{ StatisticsInifo.avator.remainCount }}
                  </span>
                  {{ t('sys.statistics1.insufficientInfoExplain') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.avator.passCount }}
                  </span>

                  {{ t('sys.statistics1.taskprocess9') }}:
                  <span class="text-red-500">
                    {{
                      StatisticsInifo.avator.allCount -
                      StatisticsInifo.avator.passCount -
                      StatisticsInifo.avator.remainCount
                    }}
                  </span>
                </div>
                <div class="ml-2">
                  {{ t('sys.statistics1.collectedDetailsExplain') }} :
                  {{ t('sys.statistics1.imageProcessCount') }}:
                  {{ StatisticsInifo.image.allCount }}
                  {{ t('sys.statistics1.taskprocess10') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.image.allCount - StatisticsInifo.image.remainCount }}
                  </span>
                  {{ t('sys.statistics1.label') }}:
                  <span class="text-red-500">
                    {{ StatisticsInifo.image.remainCount }}
                  </span>
                  {{ t('sys.statistics1.insufficientInfoExplain') }}:
                  <span class="text-green-500">
                    {{ StatisticsInifo.image.passCount }}
                  </span>

                  {{ t('sys.statistics1.taskprocess9') }}:
                  <span class="text-red-500">
                    {{
                      StatisticsInifo.image.allCount -
                      StatisticsInifo.image.passCount -
                      StatisticsInifo.image.remainCount
                    }}
                  </span>
                </div>
              </div>
            </span>
          </div>
        </template>
      </a-alert>

      <a-table
        v-model:expandedRowKeys="expandedRowKeys"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="pagination"
        :row-selection="{
          selectedRowKeys: selectedRowKeyss,
          onChange: onSelectChange,
          getCheckboxProps: (record) => {
            // 根据您的业务需求设置禁用条件
            // 例如：如果某些状态的行不允许被勾选
            const disabled =
              record.stateStatus != 1 && record.imageStatus != 2 && record.markingStatus != 1;
            return {
              disabled,
            };
          },
        }"
        :scroll="{ x: 1230 }"
        :showExpandColumn="false"
        bordered
        rowKey="id"
        showQuickJumper
        @change="handleTableChange"
        @expand="onExpand"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'name'">
            <a-image :src="record.avatarUrl" width="30px" />
            {{ record.name }}
          </template>
          <template v-if="column.dataIndex === 'uname'">
            <div> {{ record.uname }}</div>
            <div v-if="record.remark != null && record.remark != ''" class="text-red-500"
              >123213{{ record.remark }}
            </div>
          </template>
          <template v-if="column.dataIndex === 'accountStatus'">
            <a-tag v-if="record.uname != null && record.uname != ''" color="blue">
              {{ t('sys.userlist.BinduserType.2') }}
            </a-tag>
            <a-tag v-else color="orange">
              {{ t('sys.userlist.BinduserType.1') }}
            </a-tag>
          </template>
          <template v-if="column.dataIndex === 'markingStatus'">
            <a-tag v-if="record.markingStatus == 1" color="blue">
              {{ t('sys.userlist.markingSstatusTypeList.0') }}
            </a-tag>
            <a-tag v-else-if="record.markingStatus == 2" color="red">
              {{ t('sys.userlist.markingSstatusTypeList.1') }}
            </a-tag>
            <a-tag v-else color="orange">
              {{ t('sys.userlist.MarkingType.1') }}
            </a-tag>
          </template>
          <template v-if="column.dataIndex === 'taskId'">
            <a type="link" @click="drawerBoxClick(record)">
              {{ record.taskId }}
            </a>
          </template>
          <template v-if="column.dataIndex === 'overview'">
            <a
              v-if="record.overview != null"
              style="
                display: -webkit-box; /* 设置为 WebKit 内核的弹性盒子模型 */
                -webkit-box-orient: vertical; /* 垂直排列 */
                -webkit-line-clamp: 1; /* 限制显示三行 */
                width: 100px;
                overflow: hidden; /* 隐藏超出范围的内容 */
                text-overflow: ellipsis; /* 使用省略号 */
              "
              @click="DrawerReportDetalsShowclickrecord(record)"
              >{{ record.overview }}</a
            >
          </template>
          <template v-if="column.dataIndex === 'detailStatus'">
            <a-tooltip placement="top" trigger="click">
              <template #title>
                <p>
                  header :
                  {{
                    record.header != null && record.header != '' && record.header != -1
                      ? 'true'
                      : 'false'
                  }}
                </p>
                <p>
                  profile :{{
                    record.profile != null && record.profile != '' && record.profile != -1
                      ? 'true'
                      : 'false'
                  }}
                </p>
                <p>
                  photos :
                  {{ record.photoCount > 0 ? record.photoCount : 'false' }}</p
                >
                <p>
                  post :
                  {{ record.postCount > 0 ? record.postCount : 'false' }}</p
                >
              </template>
              <a-tag v-if="record.detailStatus == 0" color="green">
                {{ t('sys.configuration.taskprocess2') }}
              </a-tag>
              <a-tag v-else-if="record.detailStatus == 1" color="blue">
                {{ t('sys.configuration.taskprocess1') }}
              </a-tag>
              <a-tag v-else-if="record.detailStatus == -1" color="orange">
                {{ t('sys.configuration.taskprocess4') }}
              </a-tag>
              <a-tag v-else-if="record.detailStatus == 2" color="error">
                {{ t('sys.configuration.taskprocess9') }}
              </a-tag>
              <!-- <a-tag color="red" v-else-if="record.infoStage == 3">
                {{ t('sys.configuration.infoStage3') }}
              </a-tag>
              <a-tag v-else-if="record.infoStage == 4">
                {{ t('sys.configuration.infoStage1') }}
              </a-tag>
              <a-tag v-else-if="record.infoStage == 5">
                {{ t('sys.configuration.infoStage2') }}
              </a-tag> -->
              <span v-else></span>
            </a-tooltip>
            <a-popconfirm
              :title="t('sys.video.columns.isReet')"
              cancel-text="No"
              ok-text="Yes"
              @confirm="forgetClcick('detailStatus', record)"
            >
              <a-button class="ml-1" size="small" type="primary">
                {{ t('sys.login.forget') }}
              </a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'imageProcessStatus'">
            <a-tag
              v-if="record.detailStatus == 1 && record.imageProcessStatus == -1"
              color="orange"
            >
              {{ t('sys.configuration.taskprocess4') }}
            </a-tag>
            <a-tag
              v-else-if="record.detailStatus == 1 && record.imageProcessStatus == 0"
              color="blue"
              @click="imageDetailClick(record)"
            >
              {{ t('sys.configuration.taskprocess8') }}
            </a-tag>
            <a-tag
              v-else-if="record.detailStatus == 1 && record.imageProcessStatus == 1"
              color="error"
              @click="imageDetailClick(record)"
            >
              {{ t('sys.configuration.taskprocess9') }}
            </a-tag>

            <span v-else></span>
          </template>
          <template v-if="column.dataIndex === 'avatorStatus'">
            <a-tag
              v-if="record.imageProcessStatus == 0 && record.avatorStatus == -1"
              color="orange"
            >
              {{ t('sys.configuration.taskprocess4') }}
            </a-tag>
            <a-tag
              v-else-if="record.imageProcessStatus == 0 && record.avatorStatus == 0"
              color="green"
              @click="imageDetailClick(record)"
            >
              {{ t('sys.configuration.taskprocess2') }}
            </a-tag>
            <a-tag
              v-else-if="record.imageProcessStatus == 0 && record.avatorStatus == 1"
              color="blue"
              @click="imageDetailClick(record)"
            >
              {{ t('sys.configuration.taskprocess8') }}
            </a-tag>
            <a-tag
              v-else-if="record.imageProcessStatus == 0 && record.avatorStatus == 2"
              color="error"
            >
              {{ t('sys.configuration.taskprocess9') }}
            </a-tag>
            <span v-else></span>
          </template>
          <template v-if="column.dataIndex === 'dataSource'">
            <a-tag v-if="record.dataSource == 1" color="orange">
              {{ t('sys.userlist.dataSourceType.1') }}
            </a-tag>
            <a-tag v-else-if="record.dataSource == 2" color="blue">
              {{ t('sys.userlist.dataSourceType.2') }}
            </a-tag>
            <a-tag v-else-if="record.dataSource == 3" color="green">
              {{ t('sys.userlist.dataSourceType.3') }}
            </a-tag>
            <span v-else></span>
          </template>

          <template v-if="column.dataIndex === 'imageStatus'">
            <a-tag v-if="record.avatorStatus == 1 && record.imageStatus == 1" color="blue">
              {{ t('sys.configuration.taskprocess1') }}
            </a-tag>
            <a-tag v-else-if="record.avatorStatus == 1 && record.imageStatus == -1" color="orange">
              {{ t('sys.configuration.taskprocess4') }}
            </a-tag>
            <a-tag v-else-if="record.avatorStatus == 1 && record.imageStatus == 2" color="error">
              {{ t('sys.configuration.taskprocess9') }}
            </a-tag>
            <span v-else></span>
            <a-popconfirm
              :title="t('sys.video.columns.isReet')"
              cancel-text="No"
              ok-text="Yes"
              @confirm="forgetClcick('imageStatus', record)"
            >
              <a-button v-if="record.avatorStatus == 1" class="ml-1" size="small" type="primary">
                {{ t('sys.login.forget') }}
              </a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'analyzeStatus'">
            <a-tag v-if="record.imageStatus == 1 && record.analyzeStatus == 0" color="green">
              {{ t('sys.configuration.taskprocess2') }}
            </a-tag>
            <a-tag v-else-if="record.imageStatus == 1 && record.analyzeStatus == 1" color="blue">
              {{ t('sys.configuration.taskprocess1') }}
            </a-tag>
            <a-tag v-else-if="record.imageStatus == 1 && record.analyzeStatus == -1" color="orange">
              {{ t('sys.configuration.taskprocess4') }}
            </a-tag>
            <a-tag v-else-if="record.imageStatus == 1 && record.analyzeStatus == 2" color="error">
              {{ t('sys.configuration.taskprocess9') }}
            </a-tag>
            <span v-else></span>
            <a-popconfirm
              :title="t('sys.video.columns.isReet')"
              cancel-text="No"
              ok-text="Yes"
              @confirm="forgetClcick('analyzeStage', record)"
            >
              <a-button v-if="record.imageStatus == 1" class="ml-1" size="small" type="primary">
                {{ t('sys.login.forget') }}
              </a-button>
            </a-popconfirm>
          </template>
          <template v-if="column.dataIndex === 'stateStatus'">
            <a-tooltip placement="top" trigger="hover">
              <template v-if="record.stateStatus != 0 && record.stateStatus != 101" #title>
                <p>
                  {{ t('sys.userlist.Statusreason') }} : {{ record.stateRalevance }},{{
                    record.stateRalevanceId
                  }}
                </p>
              </template>
              <template v-if="record.stateStatus == 101" #title>
                <p>
                  {{ t('sys.userlist.Statusreasontermination') }} :
                  {{
                    record.endMessage != null
                      ? record.endMessage
                      : record.detailStopReason != null
                        ? record.detailStopReason
                        : record.imageProcessStopReason != null
                          ? record.imageProcessStopReason
                          : record.avatorDesc != null
                            ? record.avatorDesc
                            : record.imageStopReason != null
                              ? record.imageStopReason
                              : ''
                  }}</p
                >
              </template>
              <span
                v-for="(item, index) in statusTypeList"
                v-if="record.imageStatus != 101 && record.imageStatus != 0"
                :key="index"
              >
                <a-tag
                  v-if="record.imageStatus == 1 && item.value == record.stateStatus"
                  color="blue"
                >
                  {{ item.title }}
                </a-tag>
                <span v-else></span>
              </span>
              <a-tag v-if="record.stateStatus == 101" color="error">
                {{ t('sys.configuration.taskprocess11') }}
              </a-tag>
            </a-tooltip>
            <!-- <a-popconfirm
              :title="t('sys.video.columns.isReet')"
              ok-text="Yes"
              cancel-text="No"
              @confirm="forgetClcick('state', record)"
            >
              <a-button v-if="record.imageStatus != 2" class="ml-1" size="small" type="primary">
                {{ t('sys.login.forget') }}
              </a-button>
            </a-popconfirm> -->
          </template>
          <template v-if="column.dataIndex === 'valuation'">
            {{ record.valuation }}
          </template>
          <template v-if="column.dataIndex === 'superTaskId'">
            <a-tooltip placement="top" trigger="click">
              <template #title>
                <!-- <p v-if="record.friend != null">
                  {{ t('sys.userlist.columns.friend') }} :{{ record.friend }}
                  <span> </span>
                </p> -->
                <p v-if="record.city != null">
                  {{ t('sys.accountList.city') }} :{{ record.city }}
                  <span> </span>
                </p>
                <p v-if="record.school != null">
                  {{ t('sys.accountList.school') }} : {{ record.school }}</p
                >
                <p v-if="record.work != null">
                  {{ t('sys.accountList.work') }} : {{ record.work }}</p
                >
              </template>
              <a type="link">
                {{ record.superTaskId }}
              </a>
            </a-tooltip>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <a-space>
              <a-button type="primary" @click="drawerBoxClick(record)">
                {{ t('sys.configuration.particulars') }}
              </a-button>
              <a-popconfirm
                :cancel-text="t('sys.configuration.cancel')"
                :ok-text="t('sys.configuration.comfig')"
                :title="t('sys.configuration.IsDelete')"
                @confirm="Taskconfirm(record)"
              >
                <a-button danger type="primary"> {{ t('sys.configuration.delete') }}</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>

    <a-drawer
      v-model:open="DrawerDetalsShow"
      :keyboard="false"
      :title="t('sys.script.details')"
      class="custom-class"
      placement="right"
      root-class-name="root-class-name"
      width="100%"
    >
      <a-spin :spinning="drawerloading" size="small">
        <div class="w-100% p-20px flex flex-col items-center">
          <div class="w-full">
            <div class="flex items-center">
              <div class="p-1 border border-white border-5px" style="border-radius: 50%">
                <a-avatar :size="128" :src="formDetails.avatorDetailUrl" @click="avatarClick" />
              </div>
              <div
                v-if="avatarClickshow"
                class="w-full h-full fixed z-1080 flex justify-center color-white items-center top-0 left-0 bg-[#000000EE]"
                @click="avatarClickshow = false"
              >
                <div
                  class="w-full h-46px fixed top-0 left-0 z-1090 flex items-center justify-end px-20px bg-[#000000FF]"
                >
                  <CloseOutlined :style="{ fontSize: '25px' }" />
                </div>
                <div class="flex justify-center align-center w-80% max-h-120 box-xs" @click.stop>
                  <div class="flex justify-center items-center">
                    <img :src="formDetails.avatorDetailUrl" />
                  </div>

                  <div class="w-50% ml-16px py-20px witd-box">
                    <div> {{ formDetails.avatarDescription }}</div>
                    <div style="margin: 10px 0">
                      <div class="mt-1"
                        >{{ t('sys.userlist.columns.imageProcessStatus') }}:
                        <a-tag v-if="formDetails.imageProcessResult == 'ACCEPT'" color="blue">
                          {{ t('sys.configuration.taskprocess8') }}
                        </a-tag>
                        <a-tag v-else-if="formDetails.imageProcessResult == 'NO'" color="error">
                          {{ t('sys.configuration.taskprocess9') }}
                        </a-tag>

                        <span v-else></span>
                      </div>
                    </div>
                    <div>{{ formatJson1(formDetails.imageProcessJson) }}</div>
                  </div>
                </div>
              </div>
              <div class="ml-5px flex justify-between flex-1 mb-16px">
                <div class="w-50% mr-10px">
                  <div
                    v-if="
                      formDetails != null &&
                      formDetails.endMessage != null &&
                      formDetails.endMessage != ''
                    "
                    class="color-red"
                    ><span>终止原因:</span>{{ formDetails.endMessage }}
                  </div>
                  <div class="font-bold font-size-8 flex items-center">
                    {{ formDetails.name }}
                    <a-tooltip color="#108ee9" placement="bottomRight">
                      <a-button class="mx-3" type="primary" @click="handleCopyUrl">
                        {{ t('sys.configuration.copy') + t('sys.configuration.HomeUrl') }}
                      </a-button>
                      <template #title>
                        <div style="width: 100%">
                          {{ formDetails.url }}
                        </div>
                      </template>
                    </a-tooltip>
                    {{ formDetails.id }}
                  </div>
                  <div class="mt-1 color-#65686C"
                    >{{ t('sys.userlist.Marketers') }}: {{ formDetails.marketingRate }}
                  </div>
                  <div class="mt-1 color-#65686C"
                    >{{ t('sys.userlist.Investment') }}:
                    {{
                      formDetails.investRate != '-1' && formDetails.investRate
                        ? formDetails.investRate
                        : ''
                    }}
                  </div>

                  <div class="mt-1 color-#65686C"
                    >{{ t('sys.userlist.columns.taskprocess4') }}:
                    <a-tag v-if="formDetails.analyzeStage == 0" color="green">
                      {{ t('sys.configuration.taskprocess2') }}
                    </a-tag>
                    <a-tag v-else-if="formDetails.analyzeStage == 1" color="blue">
                      {{ t('sys.configuration.taskprocess1') }}
                    </a-tag>
                    <a-tag v-else-if="formDetails.analyzeStage == -1" color="orange">
                      {{ t('sys.configuration.taskprocess4') }}
                    </a-tag>
                    <!-- <a-tag v-else-if="formDetails.analyzeStage == 3">
                      {{ t('sys.configuration.taskprocess4') }}
                    </a-tag> -->
                  </div>
                  <div class="mt-1 color-#65686C">
                    {{ formDetails.header != '-1' && formDetails.header ? formDetails.header : '' }}
                  </div>
                  <div class="mt-1 color-#65686C">
                    {{ formDetails.other != '-1' && formDetails.other ? formDetails.other : '' }}
                  </div>
                  <div class="mt-1 color-#65686C">
                    {{ t('sys.configuration.describe') }}:
                    {{
                      formDetails.profile != '-1' && formDetails.profile ? formDetails.profile : ''
                    }}
                  </div>
                  <div class="mt-1 color-#65686C">
                    {{ t('sys.userlist.columns.taskprocess5') }}:
                    <a-select
                      v-model:value="selectValue"
                      style="min-width: 150px"
                      @change="stateStrChange"
                    >
                      <a-select-option
                        v-for="(item, index) in statusTypeList"
                        :key="index"
                        :value="item.value"
                        >{{ item.title }}
                      </a-select-option>
                    </a-select>
                  </div>

                  <div class="mt-1 color-#65686C">
                    {{ t('sys.userlist.Statusreason') }} : {{ formDetails.avatarAnalyze }}
                  </div>
                </div>
                <div class="w-50%">
                  <a-collapse v-model:activeKey="collapseactiveKey">
                    <!-- <a-collapse-panel key="0">
                      <template #header>
                        <div
                          class="font-bold flex items-center justify-between pr-30px font-size-4 color-black"
                        >
                          <span>{{ t('sys.userlist.ReportOverview') }} : </span>
                          <div>
                            <a-popconfirm
                              :title="t('sys.configuration.audit')"
                              :open="auditopen"
                              @open-change="auditopenChange"
                            >
                              <template #description>
                                <div
                                  class="w-500px flex flex-col justify-center line-clamp-3 pr-22px"
                                >
                                  <div class="my-10px">{{
                                    t('sys.userlist.reportReview.history')
                                  }}</div>
                                  <div
                                    class="flex items-center"
                                    v-for="(item, index) in reportList"
                                    :key="index"
                                  >
                                    <span>
                                      {{
                                        item.uid == userid
                                          ? t('sys.userlist.reportReview.me')
                                          : item.uname
                                      }}
                                      :
                                    </span>
                                    <span class="ml-10px">
                                      {{ item.content }}
                                    </span>
                                    <span class="ml-10px">
                                      <a-tag v-if="item.reportReviewStatus == 1" color="blue">{{
                                        t('sys.configuration.comfig')
                                      }}</a-tag>
                                      <a-tag v-if="item.reportReviewStatus == 2" color="red">{{
                                        t('sys.userlist.reportReview.rejected')
                                      }}</a-tag>
                                    </span>
                                  </div>
                                  <div class="my-10px">{{
                                    t('sys.userlist.reportReview.remarks')
                                  }}</div>
                                  <a-textarea
                                    :rows="5"
                                    :placeholder="t('sys.device.columns.remck')"
                                    v-model:value="auditRemark"
                                  />
                                </div>
                              </template>
                              <template #cancelButton>
                                <a-button @click="auditcancel(2)" type="primary" danger>
                                  {{ t('sys.configuration.reject') }}
                                </a-button>
                              </template>
                              <template #okButton>
                                <a-button @click="auditcancel(1)" type="primary"> 通过 </a-button>
                              </template>
                              <a-button
                                @click.stop="auditopen = true"
                                class="mr-10px"
                                type="primary"
                              >
                                {{ t('sys.configuration.audit') }}
                              </a-button>
                            </a-popconfirm>
                            <a-button
                              class="ml-10px"
                              @click.stop="DrawerReportDetalsShowclick(0)"
                              type="primary"
                              :disabled="formDetails.report == null || formDetails.report == ''"
                            >
                              {{ t('sys.configuration.Overview') }}
                            </a-button>
                            <a-button class="ml-10px" @click.stop="addfriendsclick" type="primary">
                              {{ t('sys.configuration.addfriends') }}
                            </a-button>
                            <a-popconfirm
                              :title="t('sys.configuration.IS') + t('sys.configuration.read')"
                              :ok-text="t('sys.configuration.YES')"
                              :cancel-text="t('sys.configuration.NO')"
                              @confirm="readconfirm"
                            >
                              <a-button
                                v-if="formDetails.isRead == 0"
                                class="ml-10px"
                                type="primary"
                              >
                                {{ t('sys.configuration.read') }}
                              </a-button>
                            </a-popconfirm>

                            <a-button @click.stop="handleCopy(0)" class="ml-10px" type="primary">
                              {{ t('sys.configuration.copy') }}
                            </a-button>
                          </div>
                        </div>
                      </template>
                      <div
                        class="mt-1 ellipsis-text"
                        style="white-space: pre-line"
                        v-if="isJson(formDetails.report)"
                        >{{ formDetails.report }}</div
                      >
                      <div v-else class="mt-1">
                        <a-textarea
                          :value="formDetails.report"
                          :autoSize="{ minRows: 4, maxRows: 12 }"
                          :disabled="true"
                        />
                      </div>
                    </a-collapse-panel> -->
                    <a-collapse-panel key="1">
                      <template #header>
                        <div
                          class="font-bold flex items-center justify-between pr-30px font-size-4 color-black"
                        >
                          <span>{{ t('sys.configuration.overview') }} : </span>
                          <div>
                            <a-popconfirm
                              :open="auditopen"
                              :title="t('sys.configuration.audit')"
                              @open-change="auditopenChange"
                            >
                              <template #description>
                                <div
                                  class="w-500px flex flex-col justify-center line-clamp-3 pr-22px"
                                >
                                  <div class="my-10px"
                                    >{{ t('sys.userlist.reportReview.history') }}
                                  </div>
                                  <div
                                    v-for="(item, index) in reportList"
                                    :key="index"
                                    class="flex items-center"
                                  >
                                    <span>
                                      {{
                                        item.uid == userid
                                          ? t('sys.userlist.reportReview.me')
                                          : item.uname
                                      }}
                                      :
                                    </span>
                                    <span class="ml-10px">
                                      {{ item.content }}
                                    </span>
                                    <span class="ml-10px">
                                      <a-tag v-if="item.reportReviewStatus == 1" color="blue">{{
                                        t('sys.configuration.comfig')
                                      }}</a-tag>
                                      <a-tag v-if="item.reportReviewStatus == 2" color="red">{{
                                        t('sys.userlist.reportReview.rejected')
                                      }}</a-tag>
                                    </span>
                                  </div>
                                  <div class="my-10px"
                                    >{{ t('sys.userlist.reportReview.remarks') }}
                                  </div>
                                  <a-textarea
                                    v-model:value="auditRemark"
                                    :placeholder="t('sys.device.columns.remck')"
                                    :rows="5"
                                  />
                                </div>
                              </template>
                              <template #cancelButton>
                                <a-button danger type="primary" @click="auditcancel(2)">
                                  {{ t('sys.configuration.reject') }}
                                </a-button>
                              </template>
                              <template #okButton>
                                <a-button type="primary" @click="auditcancel(1)"> 通过</a-button>
                              </template>
                              <a-button
                                class="mr-10px"
                                type="primary"
                                @click.stop="auditopen = true"
                              >
                                {{ t('sys.configuration.audit') }}
                              </a-button>
                            </a-popconfirm>
                            <a-button
                              :disabled="formDetails.overview == null || formDetails.overview == ''"
                              class="ml-10px"
                              type="primary"
                              @click.stop="DrawerReportDetalsShowclick(1)"
                            >
                              {{ t('sys.configuration.Overview') }}
                            </a-button>
                            <a-button
                              v-if="datashow"
                              class="ml-10px"
                              type="primary"
                              @click.stop="addfriendsclick"
                            >
                              {{ t('sys.configuration.addfriends') }}
                            </a-button>
                            <a-button
                              v-if="rolesListID?.roleId == 1 && selectValue == 1"
                              class="ml-10px"
                              type="primary"
                              @click.stop="AssignaccountsClick1"
                            >
                              {{ t('sys.form.placeholder.Assignaccounts') }}
                            </a-button>
                            <a-popconfirm
                              :cancel-text="t('sys.configuration.NO')"
                              :ok-text="t('sys.configuration.YES')"
                              :title="t('sys.configuration.IS') + t('sys.configuration.read')"
                              @confirm="readconfirm"
                            >
                              <a-button
                                v-if="formDetails.isRead == 0"
                                class="ml-10px"
                                type="primary"
                              >
                                {{ t('sys.configuration.read') }}
                              </a-button>
                            </a-popconfirm>

                            <a-button class="ml-10px" type="primary" @click.stop="handleCopy(1)">
                              {{ t('sys.configuration.copy') }}
                            </a-button>
                          </div>
                        </div>
                      </template>
                      <div class="mt-1 ellipsis-text" style="white-space: pre-line"
                        >{{ formDetails.overview }}
                      </div>
                    </a-collapse-panel>
                  </a-collapse>
                  <div class="mt-1 color-#65686C">
                    <div class="flex items-center justify-end">
                      <div> {{ t('sys.userlist.columns.Handannotated') }}: </div>
                      <div>
                        <a-button
                          class="ml-10px"
                          type="primary"
                          @click.stop="markingStatusstateStrChange(1)"
                        >
                          {{ t('sys.userlist.markingSstatusTypeList.0') }}
                        </a-button>
                        <a-button
                          class="ml-10px"
                          type="primary"
                          @click.stop="markingStatusstateStrChange(2)"
                        >
                          {{ t('sys.userlist.markingSstatusTypeList.1') }}
                        </a-button>
                      </div>
                    </div>
                    <div class="flex mt-2 items-center justify-end">
                      <div>
                        <a-button class="ml-10px" type="primary" @click.stop="pageupClick(1)">
                          {{ t('sys.userlist.markingSstatusTypeList.previouspage') }}
                        </a-button>
                        <a-button class="ml-10px" type="primary" @click.stop="pageupClick(2)">
                          {{ t('sys.userlist.markingSstatusTypeList.nextpage') }}
                        </a-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <a-divider />
            <a-tabs v-model:activeKey="activeKey">
              <a-tab-pane key="1" :tab="t('sys.video.columns.Photo')">
                <a-row :gutter="[20, 20]">
                  <a-col
                    v-for="(item, index) in formDetails.photosList"
                    :key="index"
                    :lg="6"
                    :md="8"
                    :sm="12"
                    :xl="4"
                    :xs="24"
                  >
                    <CardItem
                      :imageText="item.imageDesc"
                      :imagesrc="item.imageUrl"
                      :itembox="item"
                      @init-info-change="initInfo"
                    />
                  </a-col>
                </a-row>
              </a-tab-pane>
              <a-tab-pane key="2" :tab="t('sys.video.columns.invitation')">
                <a-row :gutter="[20, 20]">
                  <a-col
                    v-for="(item, index) in formDetails.postsList"
                    :key="index"
                    :lg="6"
                    :md="8"
                    :sm="12"
                    :xl="4"
                    :xs="24"
                  >
                    <CardItem
                      v-if="item.postImages.length == 0"
                      :imageText="item.imageDesc"
                      :imagesrc="item.imageUrl"
                      :itembox="item"
                      @init-info-change="initInfo"
                    />
                    <CardItemList v-else :itembox="item" />
                  </a-col>
                </a-row>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </a-spin>
    </a-drawer>
    <a-drawer
      v-model:open="DrawerReportDetalsShow"
      :keyboard="false"
      :title="DrawerReportDetalsShowit == 0 ? t('sys.userlist.ReportOverview') : '概述'"
      class="custom-class"
      placement="right"
      root-class-name="root-class-name"
      width="100%"
    >
      <div
        v-if="DrawerReportDetalsShowit == 0"
        style="white-space: pre-line"
        v-html="marketingRate(formDetails.report)"
      ></div>
      <div
        v-if="DrawerReportDetalsShowit == 1"
        style="white-space: pre-line"
        v-html="marketingRate(formDetails.overview)"
      ></div>
    </a-drawer>
    <a-modal
      v-model:open="AssignaccountsShow"
      :title="t('sys.form.placeholder.Assignaccounts')"
      style="z-index: 100000000"
      @ok="handleOk"
    >
      <div class="w-full">
        <a-form :model="formState">
          <a-row :gutter="[20, 20]">
            <a-col :sm="12" :xs="24">
              <a-form-item :label="t('sys.login.userName')">
                <a-input
                  v-model:value="formStateaccout.username"
                  :placeholder="t('sys.configuration.pleaseenter') + t('sys.login.userName')"
                  allowClear
                />
              </a-form-item>
            </a-col>
            <a-col :sm="12" :xs="24">
              <a-space>
                <a-button :icon="h(SearchOutlined)" type="primary" @click="Reactinquireaccount">
                  {{ t('sys.form.placeholder.inquire') }}
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table
        :columns="AssignaccountsListcolumns"
        :data-source="AssignaccountsList"
        :pagination="Assignaccountpagination"
        :row-key="(record) => record.userId"
        :row-selection="{
          type: 'radio',
          selectedRowKeys: AssignaccountselectedRowKeyss,
          onChange: AssignaccountnSelectChange,
        }"
        @change="AssignaccounthandleTableChange"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'accountName'">
            <span
              v-if="
                record.sysFbInfoAddHistory != null && record.sysFbInfoAddHistory.account != null
              "
            >
              {{
                record.sysFbInfoAddHistory.account != null
                  ? record.sysFbInfoAddHistory.account
                  : t('sys.account.columns.acccout') + index
              }}
            </span>
            <span v-else>
              {{ t('sys.account.columns.acccout') + index }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'createTime'">
            <span
              v-if="
                record.sysFbInfoAddHistory != null && record.sysFbInfoAddHistory.createTime != null
              "
            >
              {{ record.sysFbInfoAddHistory.createTime }}
            </span>
            <span v-else></span>
          </template>
          <template v-if="column.dataIndex === 'count'">
            <span
              v-if="record.sysFbInfoAddHistory != null && record.sysFbInfoAddHistory.count != null"
            >
              {{ record.sysFbInfoAddHistory.count }}
            </span>
            <span v-else></span>
          </template>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      v-model:open="AssignaccountsShow1"
      :title="t('sys.form.placeholder.Assignaccounts')"
      style="z-index: 100000000"
      @ok="handleOk"
    >
      <div class="w-full">
        <a-form :model="formState">
          <a-row :gutter="[20, 20]">
            <a-col :sm="12" :xs="24">
              <a-form-item :label="t('sys.login.userName')">
                <a-input
                  v-model:value="formStateaccout.username"
                  :placeholder="t('sys.configuration.pleaseenter') + t('sys.login.userName')"
                  allowClear
                />
              </a-form-item>
            </a-col>
            <a-col :sm="12" :xs="24">
              <a-space>
                <a-button :icon="h(SearchOutlined)" type="primary" @click="Reactinquireaccount">
                  {{ t('sys.form.placeholder.inquire') }}
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table
        :columns="AssignaccountsListcolumns"
        :data-source="AssignaccountsList"
        :pagination="Assignaccountpagination"
        :row-key="(record) => record.userId"
        :row-selection="{
          type: 'radio',
          selectedRowKeys: AssignaccountselectedRowKeyss,
          onChange: AssignaccountnSelectChange,
        }"
        @change="AssignaccounthandleTableChange"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'accountName'">
            <span
              v-if="
                record.sysFbInfoAddHistory != null && record.sysFbInfoAddHistory.account != null
              "
            >
              {{
                record.sysFbInfoAddHistory.account != null
                  ? record.sysFbInfoAddHistory.account
                  : t('sys.account.columns.acccout') + index
              }}
            </span>
            <span v-else>
              {{ t('sys.account.columns.acccout') + index }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'createTime'">
            <span
              v-if="
                record.sysFbInfoAddHistory != null && record.sysFbInfoAddHistory.createTime != null
              "
            >
              {{ record.sysFbInfoAddHistory.createTime }}
            </span>
            <span v-else></span>
          </template>
          <template v-if="column.dataIndex === 'count'">
            <span
              v-if="record.sysFbInfoAddHistory != null && record.sysFbInfoAddHistory.count != null"
            >
              {{ record.sysFbInfoAddHistory.count }}
            </span>
            <span v-else></span>
          </template>
        </template>
      </a-table>
    </a-modal>
    <a-modal v-model:open="addfriendsshow" :title="t('sys.configuration.addfriends')">
      <a-table
        :columns="friendscolumns"
        :data-source="friendsdataSource"
        :pagination="friendspagination"
        :row-key="(record) => record.id"
        :row-selection="{
          type: 'radio',
          selectedRowKeys: friendsselectedRowKeyss,
          onChange: friendsonSelectChange,
        }"
        @change="friendshandleTableChange"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'accountName'">
            <span
              v-if="
                record.sysFbInfoAddHistory != null && record.sysFbInfoAddHistory.account != null
              "
            >
              {{
                record.sysFbInfoAddHistory.account != null
                  ? record.sysFbInfoAddHistory.account
                  : t('sys.account.columns.acccout') + index
              }}
            </span>
            <span v-else>
              {{ t('sys.account.columns.acccout') + index }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'createTime'">
            <span
              v-if="
                record.sysFbInfoAddHistory != null && record.sysFbInfoAddHistory.createTime != null
              "
            >
              {{ record.sysFbInfoAddHistory.createTime }}
            </span>
            <span v-else></span>
          </template>
          <template v-if="column.dataIndex === 'count'">
            <span
              v-if="record.sysFbInfoAddHistory != null && record.sysFbInfoAddHistory.count != null"
            >
              {{ record.sysFbInfoAddHistory.count }}
            </span>
            <span v-else></span>
          </template>
        </template>
      </a-table>
      <template #footer>
        <a-button key="back" @click="addfriendsshow = false"
          >{{ t('sys.configuration.cancel') }}
        </a-button>
        <a-button
          key="submit"
          :disabled="friendsselectedRows && friendsselectedRows.id != null ? false : true"
          :loading="loading"
          type="primary"
          @click="friendshandleOk"
          >{{ t('sys.configuration.comfig') }}
        </a-button>
        <a-button :loading="loading" type="primary" @click="friendshandleOkauto"
          >{{ t('sys.configuration.autoallocation') }}
        </a-button>
      </template>
    </a-modal>
    <a-drawer
      v-model:open="DrawerImagDetalShow"
      :keyboard="false"
      :title="t('sys.userlist.imageProcessview')"
      class="custom-class"
      placement="right"
      root-class-name="root-class-name"
      width="100%"
    >
      <div style="white-space: pre-line">
        <p>type : {{ imageDetailsJson?.imageProcessType }}</p>
        <p>Json: {{ formatJson1(imageDetailsJson?.imageProcessJson) }}</p>
      </div>
    </a-drawer>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { h, onMounted, onUnmounted, ref } from 'vue';
  import CardItem from './compunt/cardItem.vue';
  import CardItemList from './compunt/cardItemList.vue';
  import {
    commentinfoId,
    deletePersonalTask,
    getPersonalInfo,
    getStatistics,
    hasfacebook,
    postdistributeUserList,
    posthistoryListPage,
    posthistoryListsave,
    postReviewReport,
    postUpdateStatus,
    postUserList,
    postUserListPage,
    postUserListPagelist,
    postUserLisupdate,
    readstatus,
  } from '@/api/demo/device';
  import { message } from 'ant-design-vue';
  import { useRoute } from 'vue-router';
  import { marked } from 'marked';
  import { CloseOutlined, SearchOutlined } from '@ant-design/icons-vue';
  import { useI18n } from '@/hooks/web/useI18n';

  const { t } = useI18n();
  const expandedRowKeys = ref([]);
  const route = useRoute();
  const dataSource = ref([]);
  const addfriendsshow = ref(false);
  const addfriendsclick = () => {
    addfriendsshow.value = true;
    friendsselectedRows.value = {};
    frendsinit();
  };
  const DrawerReportDetalsShowit = ref(1);
  const DrawerReportDetalsShowclick = (it) => {
    DrawerReportDetalsShow.value = true;
    DrawerReportDetalsShowit.value = it;
  };
  const DrawerReportDetalsShowclickrecord = (record) => {
    formDetails.value.overview = record.overview;
    DrawerReportDetalsShowclick(1);
  };
  const friendshandleTableChange = (pag: { pageSize: number; current: number }) => {
    console.log('====================================');
    console.log(pag);
    friendspagination.value.current = pag.current;
    friendspagination.value.pageSize = pag.pageSize;
    console.log('====================================');
  };
  const activeKey = ref('1');
  const frendsinit = () => {
    posthistoryListPage({
      current: friendspagination.value.current,
      size: friendspagination.value.pageSize,
      uid: localStorage.getItem('id'),
    }).then((res) => {
      friendsdataSource.value = res.data.records;
    });
  };
  const friendscolumns = ref([
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: t('sys.account.columns.acccout'),
      dataIndex: 'facebookName',
    },
    {
      title: t('sys.userlist.columns.createTime'),
      dataIndex: 'createTime',
    },
    {
      title: t('sys.userlist.columns.count'),
      dataIndex: 'count',
    },
  ]);
  const friendsdataSource = ref([]);
  const friendspagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const readconfirm = () => {
    readstatus({ uid: localStorage.getItem('id'), taskId: recordId.value }).then((res) => {
      console.log(res);
      if (res.code == 200) {
        message.success(t('sys.api.operationSuccess'));
      }
    });
  };
  const friendshandleOk = () => {
    posthistoryListsave({
      accountId: friendsselectedRows.value.id,
      accountName: friendsselectedRows.value.facebookName,
      infoId: formDetails.value.id,
      infoName: formDetails.value.name,
      infoUrl: formDetails.value.url,
    }).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.api.operationSuccess'));
        addfriendsshow.value = false;
      }
    });
  };
  const friendshandleOkauto = () => {
    postUserLisupdate({ id: formDetails.value.id, addDistributeStatus: -1 }).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.api.operationSuccess'));
        addfriendsshow.value = false;
        init();
      }
    });
  };
  const dataSourceTypeList = ref([
    {
      label: t('sys.userlist.dataSourceType.0'),
      value: '0',
    },
    {
      label: t('sys.userlist.dataSourceType.1'),
      value: '1',
    },
    {
      label: t('sys.userlist.dataSourceType.4'),
      value: '4',
    },
    {
      label: t('sys.userlist.dataSourceType.2'),
      value: '2',
    },
    {
      label: t('sys.userlist.dataSourceType.3'),
      value: '3',
    },
  ]);
  const BinduserTypeList = ref([
    {
      label: t('sys.userlist.BinduserType.0'),
      value: '0',
    },
    {
      label: t('sys.userlist.BinduserType.2'),
      value: '1',
    },
    {
      label: t('sys.userlist.BinduserType.1'),
      value: '2',
    },
  ]);
  const ReadTypeList = ref([
    {
      label: t('sys.userlist.ReadType.0'),
      value: '0',
    },
    {
      label: t('sys.userlist.ReadType.1'),
      value: '1',
    },
    {
      label: t('sys.userlist.ReadType.2'),
      value: '2',
    },
  ]);
  const MarkingTypeList = ref([
    {
      label: t('sys.userlist.MarkingType.0'),
      value: '0',
    },
    {
      label: t('sys.userlist.MarkingType.1'),
      value: '2',
    },
    {
      label: t('sys.userlist.MarkingType.2'),
      value: '1',
    },
  ]);
  const markingSstatusTypeList = ref([
    {
      label: t('sys.userlist.MarkingType.1'),
      value: 0,
    },
    {
      label: t('sys.userlist.markingSstatusTypeList.0'),
      value: 1,
    },
    {
      label: t('sys.userlist.markingSstatusTypeList.1'),
      value: 2,
    },
  ]);
  const markingStatusselectValue = ref(null);
  const markingStatusstateStrChange = (e) => {
    postUserLisupdate({
      id: formDetails.value.id,
      markingStatus: e,
    }).then((res) => {
      if (res.code == 200) {
        message.success(
          t('sys.userlist.columns.Handannotated') + t('sys.userlist.columns.modifySuccessfully'),
        );
        init();
      }
    });
  };
  const formState = ref({
    sorter: 'investSort',
    statesetlect: ['state', 1],
    stageType: 'state',
    stageValue: 1,
  });
  const selectedRowKeyss = ref([]);
  const onSelectChange = (selectedRowKeys: Key[]) => {
    selectedRowKeyss.value = selectedRowKeys;
  };
  const friendsselectedRowKeyss = ref([]);
  const friendsselectedRows = ref({});
  const friendsonSelectChange = (selectedRowKeys: Key[], selectedRows: Recordable[]) => {
    friendsselectedRowKeyss.value = selectedRowKeys;
    friendsselectedRows.value = selectedRows[0];
  };
  const handleOk = () => {
    let idsList = [];
    if (selectedRowKeyss.value.length > 0) {
      idsList = selectedRowKeyss.value;
    } else if (formDetails.value.id != null && formDetails.value.id != undefined) {
      idsList = [formDetails.value.id];
    } else {
      message.warning('请选择用户');
      return;
    }
    postdistributeUserList({ uid: AssignaccountselectedRows.value.userId, ids: idsList }).then(
      (res) => {
        if (res.code == 200) {
          message.success(t('sys.api.operationSuccess'));
          AssignaccountsShow.value = false;
          AssignaccountsShow1.value = false;
          selectedRowKeyss.value = [];
          init();
        }
      },
    );
  };
  const avatarClickshow = ref(false);
  const avatarClick = () => {
    if (rolesListID.value) {
      avatarClickshow.value = true;
    }
  };
  const AssignaccountsShow = ref(false);
  const AssignaccountsShow1 = ref(false);
  const AssignaccountsList = ref([]);
  const Assignaccountsform = ref();
  const AssignaccountsClick = () => {
    AssignaccountsShow.value = true;
    AssignaccountselectedRowKeyss.value = [];
    AssignaccountselectedRows.value = [];
    AssignaccountsList.value = [];
    formStateaccout.value = {};
    Assignaccountpaginationinit();
  };
  const configShow = ref(false);
  const Addconfig = () => {
    configShow.value = true;
  };
  const pageupClick = (it) => {
    let indexup = dataSourceList.value.indexOf(formDetails.value.taskId);

    if (it == 1) {
      if (indexup == 0) {
        message.warning(t('sys.configuration.upMessage'));
        return;
      }
      recordId.value = dataSourceList.value[indexup - 1];
      gatherTaskId.value = dataSourceList.value[indexup - 1];
    } else {
      if (indexup == dataSourceList.value.length - 1) {
        message.warning(t('sys.configuration.downMessage'));
        return;
      }
      recordId.value = dataSourceList.value[indexup + 1];
      gatherTaskId.value = dataSourceList.value[indexup + 1];
    }
    drawerloading.value = true;
    formDetails.value = {};
    initInfo();
  };
  const AssignaccountsClick1 = () => {
    AssignaccountsShow1.value = true;
    AssignaccountselectedRowKeyss.value = [];
    AssignaccountselectedRows.value = [];
    formStateaccout.value = {};
    AssignaccountsList.value = [];
    Assignaccountpaginationinit();
  };
  const formStateaccout = ref({});
  const Assignaccountpaginationinit = () => {
    postUserList({
      current: Assignaccountpagination.value.current,
      size: Assignaccountpagination.value.pageSize,
      ...formStateaccout.value,
    }).then((res) => {
      if (res.code == 200) {
        AssignaccountsList.value = res.data.records;
      }
    });
  };
  const DrawerReportDetalsShow = ref(false);
  const DrawerImagDetalShow = ref(false);
  const imageDetailsJson = ref({});
  const imageDetailClick = (it) => {
    imageDetailsJson.value = it;
    DrawerImagDetalShow.value = true;
  };
  const onExpand = (expanded: boolean, record: any) => {
    const index = expandedRowKeys.value.indexOf(record.id);
    if (expanded && index === -1) {
      expandedRowKeys.value.push(record.id);
    } else if (!expanded && index !== -1) {
      expandedRowKeys.value.splice(index, 1);
    }
  };
  const fixJsonString = (input) => {
    // 移除URL周围的反引号
    let fixed = input.replace(/`([^`]+)`/g, '$1');
    // 如果字符串以双引号开始和结束，则移除它们
    if (fixed.startsWith('"') && fixed.endsWith('"')) {
      fixed = fixed.substring(1, fixed.length - 1);
    }
    return fixed;
  };
  const formatJson1 = (jsonString) => {
    try {
      if (!jsonString) return '';
      const fixedString = fixJsonString(jsonString);
      const jsonObj = JSON.parse(fixedString);
      return JSON.stringify(jsonObj, null, 2);
    } catch (error) {
      console.error('JSON格式化失败:', error.message);
      return '无效的JSON数据';
    }
  };
  const formatJSON = (json, indent = 0) => {
    let result = '';
    const indentStr = '  '.repeat(indent);
    const nextIndent = indent + 1;
    const nextIndentStr = '  '.repeat(nextIndent);

    if (typeof json === 'object') {
      if (json === null) {
        result += '<span class="null">null</span>';
      } else if (Array.isArray(json)) {
        result += '[';
        if (json.length > 0) {
          result += '\n' + nextIndentStr;
          for (let i = 0; i < json.length; i++) {
            result += formatJSON(json[i], nextIndent);
            if (i < json.length - 1) {
              result += ',\n' + nextIndentStr;
            }
          }
          result += '\n' + indentStr;
        }
        result += ']';
      } else {
        result += '{';
        const keys = Object.keys(json);
        if (keys.length > 0) {
          result += '\n' + nextIndentStr;
          for (let i = 0; i < keys.length; i++) {
            const key = keys[i];
            result += '<span class="key">"' + key + '": </span>';
            result += formatJSON(json[key], nextIndent);
            if (i < keys.length - 1) {
              result += ',\n' + nextIndentStr;
            }
          }
          result += '\n' + indentStr;
        }
        result += '}';
      }
    } else if (typeof json === 'string') {
      result += '<span class="string">"' + json.replace(/"/g, '\\"') + '"</span>';
    } else if (typeof json === 'number') {
      result += '<span class="number">' + json + '</span>';
    } else if (typeof json === 'boolean') {
      result += '<span class="boolean">' + (json ? 'true' : 'false') + '</span>';
    }

    return result;
  };
  const marketingRate = (str) => {
    if (str != null && str != '') {
      const html = marked(str);
      return html;
    }
  };
  const radioChange = (e) => {
    if (formState.value.sorter == 'marketingSort') {
      const targetColumn = columns.value.find((item) => item.dataIndex === 'marketingRate');
      const targetColumn1 = columns.value.find((item) => item.dataIndex === 'investRate');
      targetColumn.sorter = true;
      targetColumn1.sorter = false;
    } else if (formState.value.sorter == 'investSort') {
      const targetColumn = columns.value.find((item) => item.dataIndex === 'investRate');
      const targetColumn1 = columns.value.find((item) => item.dataIndex === 'marketingRate');
      targetColumn.sorter = true;
      targetColumn1.sorter = false;
    }
  };
  const collapseactiveKey = ref('1');
  const selectValue = ref(0);
  const handleCopy = async (it) => {
    let text = '';
    if (it == 0) {
      text = formDetails.value.report;
    } else {
      text = formDetails.value.overview;
    }
    if (navigator.clipboard && navigator.clipboard.writeText) {
      try {
        await navigator.clipboard.writeText(text);
        message.success(t('sys.configuration.copySuccess'));
      } catch (err) {
        message.success(t('sys.configuration.copyError'));
        console.error('复制失败:', err);
      }
    } else {
      // 使用 document.execCommand('copy') 作为回退方案
      const textarea = document.createElement('textarea');
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      try {
        document.execCommand('copy');
        message.success(t('sys.configuration.copySuccess'));
      } catch (err) {
        console.error('复制失败:', err);
        message.success(t('sys.configuration.copyError'));
      }
      document.body.removeChild(textarea);
    }
  };
  const handleCopyUrl = async () => {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      try {
        await navigator.clipboard.writeText(formDetails.value.url);
        message.success(t('sys.configuration.copySuccess'));
      } catch (err) {
        message.success(t('sys.configuration.copyError'));
        console.error('复制失败:', err);
      }
    } else {
      // 使用 document.execCommand('copy') 作为回退方案
      const textarea = document.createElement('textarea');
      textarea.value = formDetails.value.url;
      document.body.appendChild(textarea);
      textarea.select();
      try {
        document.execCommand('copy');
        message.success(t('sys.configuration.copySuccess'));
      } catch (err) {
        console.error('复制失败:', err);
        message.success(t('sys.configuration.copyError'));
      }
      document.body.removeChild(textarea);
    }
  };
  const stateStrChange = (e) => {
    postUserLisupdate({ id: formDetails.value.id, state: selectValue.value }).then((res) => {
      if (res.code == 200) {
        message.success(
          t('sys.userlist.columns.taskprocess5') + t('sys.userlist.columns.modifySuccessfully'),
        );
        init();
      }
    });
  };
  const Reactinquire = () => {
    if (formState.value.statesetlect != null && formState.value.statesetlect.length > 0) {
      formState.value.stageType = formState.value.statesetlect[0];
      formState.value.stageValue = formState.value.statesetlect[1];
    } else {
      formState.value.stageType = null;
      formState.value.stageValue = null;
    }
    pagination.value.current = 1;
    init();
  };
  const auditRemark = ref('');
  const auditopen = ref(false);
  const auditconfirm = () => {
    auditopen.value = false;
  };
  const auditcancel = (it) => {
    postReviewReport({
      infoId: formDetails.value.id,
      reportReviewStatus: it,
      uname: localStorage.getItem('username'),
      uid: localStorage.getItem('id'),
      content: auditRemark.value,
    }).then((res) => {
      if (res.code == 200) {
        auditopen.value = false;
        auditRemark.value = '';
        if (it == 1) {
          message.success('通过成功');
        } else if (it == 2) {
          message.success('驳回成功');
        }

        init();
      }
    });
  };
  const reportList = ref([]);
  const auditopenChange = (bool) => {
    auditRemark.value = '';

    if (!bool) {
      auditopen.value = false;
      return;
    } else {
      commentinfoId(formDetails.value.id).then((res) => {
        if (res.code == 200) {
          reportList.value = res.data;
        }
      });
    }
  };
  const optionsstatusTypeList = ref([
    {
      value: 'infoStage',
      label: t('sys.userlist.columns.taskprocess2'),
      children: [
        {
          value: '-1',
          label: t('sys.configuration.taskprocess4'),
        },
        {
          value: '0',
          label: t('sys.configuration.taskprocess2'),
        },
        {
          value: '1',
          label: t('sys.configuration.taskprocess1'),
        },
        {
          value: '2',
          label: t('sys.configuration.taskprocess9'),
        },
      ],
    },
    {
      value: 'imageProcessStage',
      label: t('sys.userlist.columns.imageProcessStatus'),
      children: [
        {
          value: '-1',
          label: t('sys.configuration.taskprocess4'),
        },
        {
          value: '0',
          label: t('sys.configuration.taskprocess8'),
        },
        {
          value: '1',
          label: t('sys.configuration.taskprocess9'),
        },
      ],
    },
    {
      value: 'avatorStage',
      label: t('sys.userlist.columns.avatorStatus'),
      children: [
        {
          value: '-1',
          label: t('sys.configuration.taskprocess4'),
        },
        {
          value: '1',
          label: t('sys.configuration.taskprocess8'),
        },
        {
          value: '2',
          label: t('sys.configuration.taskprocess9'),
        },
      ],
    },
    {
      value: 'state',
      label: t('sys.userlist.columns.taskprocess5'),
      children: [
        {
          label: t('sys.userlist.selectType.title1'),
          value: 0,
        },
        {
          label: t('sys.userlist.selectType.title2'),
          value: 1,
        },
        {
          label: t('sys.userlist.selectType.title3'),
          value: 2,
        },
        {
          label: t('sys.userlist.selectType.title4'),
          value: 3,
        },
        {
          label: t('sys.userlist.selectType.title5'),
          value: 4,
        },
        {
          label: t('sys.userlist.selectType.title6'),
          value: 5,
        },
        {
          label: t('sys.userlist.selectType.title7'),
          value: 6,
        },
        {
          label: t('sys.userlist.selectType.title8'),
          value: 7,
        },
        {
          label: t('sys.userlist.selectType.title9'),
          value: 8,
        },
      ],
    },
    // {
    //   value: 'analyzeStage',
    //   label: t('sys.userlist.columns.taskprocess4'),
    //   children: [
    //     {
    //       value: '-1',
    //       label: t('sys.configuration.taskprocess4'),
    //     },
    //     {
    //       value: '0',
    //       label: t('sys.configuration.taskprocess2'),
    //     },
    //     {
    //       value: '1',
    //       label: t('sys.configuration.taskprocess1'),
    //     },
    //   ],
    // },
  ]);
  const statusTypeList = ref([
    {
      title: t('sys.userlist.selectType.title1'),
      value: 0,
    },
    {
      title: t('sys.userlist.selectType.title2'),
      value: 1,
    },
    {
      title: t('sys.userlist.selectType.title3'),
      value: 2,
    },
    {
      title: t('sys.userlist.selectType.title4'),
      value: 3,
    },
    {
      title: t('sys.userlist.selectType.title5'),
      value: 4,
    },
    {
      title: t('sys.userlist.selectType.title6'),
      value: 5,
    },
    {
      title: t('sys.userlist.selectType.title7'),
      value: 6,
    },
    {
      title: t('sys.userlist.selectType.title8'),
      value: 7,
    },
    {
      title: t('sys.userlist.selectType.title9'),
      value: 8,
    },
  ]);
  const AssignaccountsListcolumns = ref([
    {
      title: 'ID',
      dataIndex: 'userId',
    },
    {
      title: t('sys.login.userName'),
      dataIndex: 'username',
    },
  ]);
  const Assignaccountpagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const AssignaccountselectedRowKeyss = ref([]);
  const AssignaccountselectedRows = ref({});
  const AssignaccounthandleTableChange = (pag: { pageSize: number; current: number }) => {
    Assignaccountpagination.value.current = pag.current;
    Assignaccountpagination.value.pageSize = pag.pageSize;
    Assignaccountpaginationinit();
  };
  const Reactinquireaccount = () => {
    Assignaccountpaginationinit();
  };
  const AssignaccountnSelectChange = (selectedRowKeys: Key[], selectedRows: Recordable[]) => {
    console.log(selectedRowKeys);
    console.log(selectedRows);
    AssignaccountselectedRowKeyss.value = selectedRowKeys;
    AssignaccountselectedRows.value = selectedRows[0];
  };
  const columns = ref([
    {
      title: 'ID',
      dataIndex: 'taskId',
    },
    {
      title: t('sys.userlist.columns.name'),
      dataIndex: 'name',
    },
    {
      title: t('sys.userlist.columns.taskId'),
      dataIndex: 'superTaskId',
    },
    {
      title: t('sys.code.columns.account'),
      dataIndex: 'uname',
    },
    {
      title: t('sys.code.columns.accountStatus'),
      dataIndex: 'accountStatus',
    },
    {
      title: t('sys.userlist.columns.Handannotated'),
      dataIndex: 'markingStatus',
    },
    {
      title: t('sys.userlist.columns.taskprocess2'),
      dataIndex: 'detailStatus',
      minWidth: 180,
    },
    {
      title: t('sys.userlist.columns.imageProcessStatus'),
      dataIndex: 'imageProcessStatus',
      minWidth: 180,
    },
    {
      title: t('sys.userlist.columns.avatorStatus'),
      dataIndex: 'avatorStatus',
      minWidth: 180,
    },
    {
      title: t('sys.userlist.columns.taskprocess5'),
      dataIndex: 'stateStatus',
      minWidth: 180,
    },
    // {
    //   title: t('sys.userlist.columns.taskprocess4'),
    //   dataIndex: 'analyzeStatus',
    //   minWidth: 180,
    // },
    {
      title: t('sys.userlist.columns.taskprocess6'),
      dataIndex: 'overview',
    },
    {
      title: t('sys.userlist.columns.taskprocess7'),
      dataIndex: 'overviewTime',
      sorter: true,
      minWidth: 80,
    },
    // {
    //   title: t('sys.userlist.Investment'),
    //   dataIndex: 'investRate',
    //   sorter: true,
    //   minWidth: 120,
    // },
    // {
    //   title: t('sys.userlist.Marketers'),
    //   dataIndex: 'marketingRate',
    //   minWidth: 120,
    // },
    {
      title: t('sys.userlist.columns.dataSource'),
      dataIndex: 'dataSource',
      minWidth: 120,
    },
    {
      title: t('sys.configuration.action'),
      dataIndex: 'operation',
      key: 'operation',
    },
  ]);
  // const basePage = ref({
  //   current: 1,
  //   size: 10,
  // });
  const loading = ref(true);
  const DrawerDetalsShow = ref(false);
  const drawerloading = ref(false);
  const gatherTaskId = ref(null);
  const Taskconfirm = (e) => {
    deletePersonalTask(e.taskId).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.configuration.deleteSucces'));
        init();
      }
    });
  };
  const textIsfold = ref(true);
  const isJson = (str) => {
    try {
      JSON.parse(str);
    } catch (e) {
      return false;
    }
    return true;
  };
  const formDetails = ref({});
  const pagination = ref({
    total: 0,
    current: 1,
    showQuickJumper: true,
    pageSize: 10,
  });
  const userInifo = ref({});
  const DrawerEditShow = ref(0);
  const recordId = ref(null);
  const drawerBoxClick = (record) => {
    gatherTaskId.value = record.taskId;
    DrawerEditShow.value = 0;
    recordId.value = record.taskId;
    DrawerDetalsShow.value = true;
    formDetails.value = {};
    drawerloading.value = true;
    initInfo();
  };
  const forgetClcick = (it, record) => {
    let params = {
      taskId: record.taskId,
    };
    params[it] = '-1';
    postUpdateStatus(params).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.api.operationSuccess'));
        init();
      }
    });
  };
  const initInfo = () => {
    formDetails.value = {};
    getPersonalInfo({ taskId: recordId.value, uid: localStorage.getItem('id') }).then((res) => {
      if (res.code == 200) {
        drawerloading.value = false;
        formDetails.value = res.data;
        selectValue.value = res.data.state;
        markingStatusselectValue.value = res.data.markingStatus;
      }
    });
  };
  const drawerEditBoxClick = (record) => {
    gatherTaskId.value = record.taskId;
    userInifo.value = record;
    DrawerEditShow.value = 1;

    recordId.value = record.taskId;
    DrawerDetalsShow.value = true;
    drawerloading.value = true;
    formDetails.value = {};
    initInfo();
  };
  const datashow = ref(false);
  const facebookshow = () => {
    hasfacebook({ uid: localStorage.getItem('id') }).then((res) => {
      if (res.code == 200) {
        datashow.value = res.data;
      }
    });
  };
  // const handleTableChange = (e, sorter) => {
  //   pagination.value = e;
  //   console.log('====================================');
  //   console.log(sorter.field);
  //   console.log('====================================');
  //   init();
  // };
  const handleTableChange = (
    e: { pageSize: number; current: number },
    filters: any,
    sorter: any,
  ) => {
    if (formState.value.sorter == 'marketingSort') {
      formState.value.marketingSort = sorter.order;
    } else if (formState.value.sorter == 'investSort') {
      formState.value.investSort = sorter.order;
    }
    if (sorter.field == 'analyzeEndTime') {
      formState.value.analyzeSort = sorter.order;
    }
    pagination.value = e;
    init();
  };
  const StatisticsInifo = ref({
    detail: {
      allCount: 0,
      passCount: 0,
      remainCount: 0,
    },
    process: {
      allCount: 0,
      passCount: 0,
      remainCount: 0,
    },
    avator: {
      allCount: 0,
      passCount: 0,
      remainCount: 0,
    },
    image: {
      allCount: 0,
      passCount: 0,
      remainCount: 0,
    },
  });
  const dataSourceList = ref([]);
  const init = () => {
    loading.value = true;
    postUserListPage({
      size: pagination.value.pageSize,
      current: pagination.value.current,
      uid: localStorage.getItem('id'),
      ...formState.value,
    }).then((res) => {
      if (res.code == 200) {
        dataSource.value = res.data.records;
        pagination.value.total = res.data.total;
        loading.value = false;
      }
    });
    postUserListPagelist({ uid: localStorage.getItem('id'), ...formState.value }).then((res) => {
      if (res.code == 200) {
        dataSourceList.value = res.data;
      }
    });
    if (statisticsTimer.value) {
      clearInterval(statisticsTimer);
      statisticsTimer.value = null;
    }
    statisticsTimer.value = setInterval(() => {
      getStatistics().then((res) => {
        if (res.code == 200) {
          StatisticsInifo.value = res.data;
        }
      });
    }, 3000);
    facebookshow();
  };
  const statisticsTimer = ref();
  onUnmounted(() => {
    if (statisticsTimer.value) {
      clearInterval(statisticsTimer);
      statisticsTimer.value = null;
    }
  });
  const rolesList = ref([]);
  const rolesListID = ref(null);
  const userid = ref('');
  onMounted(() => {
    if (route.query.taskId) {
      // drawerBoxClick({ taskId });
      formState.value.superTaskId = route.query.taskId;
    }
    if (route.query.taskId1) {
      drawerEditBoxClick({ taskId: route.query.taskId1 });
    }
    if (route.query.userId) {
      drawerBoxClick({ taskId: route.query.userId });
    }
    if (localStorage.getItem('id')) {
      userid.value = localStorage.getItem('id');
    }
    rolesList.value = JSON.parse(localStorage.getItem('rolesList'));
    rolesListID.value = rolesList.value.find((item) => item.roleId === 1);

    if (rolesListID.value) {
      columns.value.splice(9, 0, {
        title: t('sys.userlist.columns.taskprocess3'),
        dataIndex: 'imageStatus',
        minWidth: 180,
      });

      optionsstatusTypeList.value.splice(3, 0, {
        value: 'imageDescStage',
        label: t('sys.userlist.columns.taskprocess3'),
        children: [
          {
            value: '-1',
            label: t('sys.configuration.taskprocess4'),
          },
          {
            value: '2',
            label: t('sys.configuration.taskprocess9'),
          },
          {
            value: '1',
            label: t('sys.configuration.taskprocess1'),
          },
        ],
      });
    }

    init();
  });
</script>
<style lang="less" scoped>
  .ellipsis-text {
    display: -webkit-box; /* 设置为 WebKit 内核的弹性盒子模型 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 10; /* 限制显示三行 */
    overflow: hidden; /* 隐藏超出范围的内容 */
    text-overflow: ellipsis; /* 使用省略号 */
  }

  .ellipsis-text-3 {
    display: -webkit-box; /* 设置为 WebKit 内核的弹性盒子模型 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 3; /* 限制显示三行 */
    overflow: hidden; /* 隐藏超出范围的内容 */
    text-overflow: ellipsis; /* 使用省略号 */
  }

  :deep(.ant-pagination) {
    padding-right: 50px !important;
  }
</style>
